<template>
  <div class="container">
    <section>
      <van-nav-bar title="登录"
                   fixed
                   placeholder
                   safe-area-inset-top/>
    </section>
    <div   class="login">
      <van-form>
        <van-field
            v-model = "user.userName"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model = "user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
          <van-button round block type="info" native-type="submit" @click="register">没有账号点击注册</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>


<script setup>
import {useRouter} from "vue-router";
import {setToken,removeToken} from "@/util/auth";
import {login} from "@/network/auth/index.js";

import {ref} from "vue";
const user = ref({
  userName: "",
  password: "",
})
let router = useRouter();



function onSubmit() {
  login(user.value).then(res => {
    console.log(res);
    removeToken()
    setToken(res.data.token)
    localStorage.setItem("userName", res.data.info.userName)
    localStorage.setItem("userId", res.data.info.userId)
    router.push({
      path: "/home",
    });
  })

}
function register() {
  router.push({
    path: "/register",
  });
}
</script>

<style scoped lang="scss">
.container {
  height: 895px;
  width: 100%;
  background: white;
  display: table;
}

.login {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
</style>
